<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加租房信息</title>
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <style>
        .layui-form-label {
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
        <input type="hidden" name="id" th:if="${rentHouse}" th:value="${rentHouse.id}">
        <div class="layui-form-item" style="width: 550px">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.title}:''" type="text" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 650px">
            <label class="layui-form-label">上传图片</label>
            <input type="hidden" name="picture" id="picture"  th:value="${rentHouse?.picture}">
            <div class="layui-input-block">
                <!--多张图片上传-->
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="uploadImgs">点击选择图片</button>
                    <button type="button" class="layui-btn layui-btn-normal" id="resetImg">重置</button>

                    <p>图片预览：</p>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">

                        <div class="layui-upload-list" id="previewImg">
                            <div   th:each="image,status:${#strings.arraySplit(rentHouse?.picture,',')}">
                                <img th:src="${'/upload/rentHouse/'+image}"  style="position: relative ;left:12px; width: 95%;height: auto;margin-bottom: 10px"
                                     th:alt="${image}"  class="layui-upload-img" />
                            </div>
                        </div>

                    </blockquote>
                    <button type="button" class="layui-btn" id="upoadBtn">点击上传</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">联系人</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.linkman}:''" type="text" name="linkman" lay-verify="required" placeholder="请输入联系人" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.phone}:''" type="text" name="phone" lay-verify="phone" placeholder="请输入号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.email}:''" type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">户型</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.houseType}:''" type="text" name="houseType" lay-verify="required" placeholder="请输入户型" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 450px">
            <label class="layui-form-label">位置</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.location}:''" type="text" name="location" lay-verify="required" placeholder="请输入位置" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label" >地区</label>
            <div class="layui-input-block">
                <select name="region" class="region_select" lay-verify="required">
                    <option  value="">请选择地区</option>
                    <option th:each="region : ${session.regionList}" th:value="${region.regionName}" th:text="${region.regionName}" th:selected="${rentHouse != null and rentHouse.region == region.regionName}" > </option>
                </select>
            </div>
        </div>
        <br/>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">小区</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.housingEstate}:''" type="text" name="housingEstate" lay-verify="required" placeholder="请输入小区" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">面积</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.area}:''" type="text" name="area" lay-verify="number" placeholder="请输入面积(㎡)" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.price}:''" type="text" name="price" lay-verify="number" placeholder="请输入价格(元/月)" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">付款方式</label>
            <div class="layui-input-block">
                <select name="priceExplain" class="priceExplain_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${rentHouse?.priceExplain == '押一付一'}" value="押一付一" >押一付一</option>
                    <option th:selected="${rentHouse?.priceExplain == '押一付三'}" value="押一付三" >押一付三</option>
                    <option th:selected="${rentHouse?.priceExplain == '半年付'}" value="半年付" >半年付</option>
                    <option th:selected="${rentHouse?.priceExplain == '年付'}" value="年付" >年付</option>
                    <option th:selected="${rentHouse?.priceExplain == '面议'}" value="面议" >面议</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">总楼层</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.floor}:''" type="text" name="floor" lay-verify="number" placeholder="请输入总楼层（正整数）" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 250px">
            <label class="layui-form-label">楼层</label>
            <div class="layui-input-block">
                <select name="floorLevel" class="floorLevel_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${rentHouse?.floorLevel == '底层'}" value="底层" >底层</option>
                    <option th:selected="${rentHouse?.floorLevel == '低层'}" value="低层" >低层</option>
                    <option th:selected="${rentHouse?.floorLevel == '中层'}" value="中层" >中层</option>
                    <option th:selected="${rentHouse?.floorLevel == '高层'}" value="高层" >高层</option>
                    <option th:selected="${rentHouse?.floorLevel == '顶层'}" value="顶层" >顶层</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">租房类型</label>
            <div class="layui-input-block">
                <select name="rentType" class="rentType_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${rentHouse?.rentType == '整租'}" value="整租" >整租</option>
                    <option th:selected="${rentHouse?.rentType == '合租'}" value="合租" >合租</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">房屋类型</label>
            <div class="layui-input-block">
                <select id="type" name="type" class="type_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${rentHouse?.type == '普通住宅'}"  value="普通住宅" >普通住宅</option>
                    <option th:selected="${rentHouse?.type == '公寓'}" value="公寓" >公寓</option>
                    <option th:selected="${rentHouse?.type == '别墅'}"  value="别墅" >别墅</option>
                    <option th:selected="${rentHouse?.type == '其他'}"  value="其他" >其他</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">装修情况</label>
            <div class="layui-input-block">
                <select name="decoration" class="decoration_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${rentHouse?.decoration == '毛坯'}" value="毛坯" >毛坯</option>
                    <option th:selected="${rentHouse?.decoration == '简单装修'}" value="简单装修" >简单装修</option>
                    <option th:selected="${rentHouse?.decoration == '精装修'}" value="精装修" >精装修</option>
                    <option th:selected="${rentHouse?.decoration == '豪华装修'}" value="豪华装修" >豪华装修</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">朝向</label>
            <div class="layui-input-block">
                <select name="orientation" class="orientation_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option  th:selected="${rentHouse?.orientation == '东'}" value="东" >东</option>
                    <option  th:selected="${rentHouse?.orientation == '南'}" value="南" >南</option>
                    <option  th:selected="${rentHouse?.orientation == '西'}" value="西" >西</option>
                    <option  th:selected="${rentHouse?.orientation == '北'} " value="北" >北</option>
                    <option  th:selected="${rentHouse?.orientation == '东南'}" value="东南" >东南</option>
                    <option  th:selected="${rentHouse?.orientation == '东西'}" value="东西" >东西</option>
                    <option  th:selected="${rentHouse?.orientation == '南北'}" value="南北" >南北</option>
                    <option  th:selected="${rentHouse?.orientation == '西南'}" value="西南" >西南</option>
                    <option  th:selected="${rentHouse?.orientation == '东北'}" value="东北" >东北</option>
                    <option  th:selected="${rentHouse?.orientation == '西北'}" value="西北" >西北</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item" style="width: 450px;height:300px ">
            <label class="layui-form-label">房源概况</label>
            <div class="layui-input-block">
                <textarea style="resize: none;width: 450px; height: 300px"  th:text="${rentHouse != null}?${rentHouse.houseSituation}:''"  name="houseSituation" id="houseSituation" lay-verify="required" placeholder="请输入房源概况" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item" style="width: 550px">
            <label class="layui-form-label">出租要求</label>
            <div class="layui-input-block">
                <input th:value="${rentHouse != null}?${rentHouse.rentalDemand}:''" type="text" name="rentalDemand" lay-verify="required" placeholder="请输入出租要求" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" >
            <label class="layui-form-label">电梯</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.lift == 1}"  lay-verify="otherReq" type="radio" name="lift" value="1" title="有">
                <input th:checked="${rentHouse?.lift == 0}"  lay-verify="otherReq" type="radio" name="lift" value="0" title="无" >
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">阳台</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.balcony == 1}" lay-verify="otherReq" type="radio" name="balcony" value="1" title="有">
                <input th:checked="${rentHouse?.balcony == 0}" lay-verify="otherReq" type="radio" name="balcony" value="0" title="无" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">南北通透</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.northSouth == 1}" lay-verify="otherReq" type="radio" name="northSouth" value="1" title="是">
                <input th:checked="${rentHouse?.northSouth == 0}" lay-verify="otherReq" type="radio" name="northSouth" value="0" title="否" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">洗衣机</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.washingMachine == 1}" lay-verify="otherReq"  type="radio" name="washingMachine" value="1" title="有">
                <input th:checked="${rentHouse?.washingMachine == 0}" lay-verify="otherReq" type="radio" name="washingMachine" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">冰箱</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.fridge == 1}" lay-verify="otherReq"  type="radio" name="fridge" value="1" title="有">
                <input th:checked="${rentHouse?.fridge == 0}" lay-verify="otherReq" type="radio" name="fridge" value="0" title="无" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">卫生间</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.toilet == 1}" lay-verify="otherReq"  type="radio" name="toilet" value="1" title="有">
                <input th:checked="${rentHouse?.toilet == 0}" lay-verify="otherReq"  type="radio" name="toilet" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">宽带</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.broadband == 1}" lay-verify="otherReq"   type="radio" name="broadband" value="1" title="有">
                <input th:checked="${rentHouse?.broadband == 0}" lay-verify="otherReq"  type="radio" name="broadband" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">抽油烟机</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.kitchenVentilator == 1}" lay-verify="otherReq"  type="radio" name="kitchenVentilator" value="1" title="有">
                <input th:checked="${rentHouse?.kitchenVentilator == 0}" lay-verify="otherReq" type="radio" name="kitchenVentilator" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">燃气灶</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.gasStove == 1}" lay-verify="otherReq"  type="radio" name="gasStove" value="1" title="有">
                <input th:checked="${rentHouse?.gasStove == 0}" lay-verify="otherReq" type="radio" name="gasStove" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">可做饭</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.cook == 1}" lay-verify="otherReq"  type="radio" name="cook" value="1" title="是">
                <input th:checked="${rentHouse?.cook == 0}" lay-verify="otherReq" type="radio" name="cook" value="0" title="否" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">沙发</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.sofa == 1}"  lay-verify="otherReq"  type="radio" name="sofa" value="1" title="有">
                <input th:checked="${rentHouse?.sofa == 0}" lay-verify="otherReq"  type="radio" name="sofa" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">空调</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.airConditioner == 1}" lay-verify="otherReq"  type="radio" name="airConditioner" value="1" title="有">
                <input th:checked="${rentHouse?.airConditioner == 0}" lay-verify="otherReq"  type="radio" name="airConditioner" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电视</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.television == 1}" lay-verify="otherReq"  type="radio" name="television" value="1" title="有">
                <input th:checked="${rentHouse?.television == 0}" lay-verify="otherReq"  type="radio" name="television" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">衣柜</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.closet == 1}" lay-verify="otherReq"  type="radio" name="closet" value="1" title="有">
                <input th:checked="${rentHouse?.closet == 0}" lay-verify="otherReq"  type="radio" name="closet" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">床</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.bed == 1}" lay-verify="otherReq"  type="radio" name="bed" value="1" title="有">
                <input th:checked="${rentHouse?.bed == 0}" lay-verify="otherReq"  type="radio" name="bed" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">暖气</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.heating == 1}" lay-verify="otherReq"  type="radio" name="heating" value="1" title="有">
                <input th:checked="${rentHouse?.heating == 0}" lay-verify="otherReq" type="radio" name="heating" value="0" title="无" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">热水器</label>
            <div class="layui-input-block">
                <input th:checked="${rentHouse?.calorifier == 1}"  lay-verify="otherReq" type="radio" name="calorifier" value="1" title="有">
                <input th:checked="${rentHouse?.calorifier == 0}" lay-verify="otherReq"  type="radio" name="calorifier" value="0" title="无" >
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button th:text="${rentHouse != null}?'立即修改':'立即添加'" class="layui-btn" lay-submit="" lay-filter="addRentHouse">立即添加</button>
                <button th:if="${rentHouse == null}" type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>

    <script th:src="@{/layuiadmin/layui/layui.js}"></script>
    <script>
        function getDataType(data) {
            return Object.prototype.toString.call(data);
        }

        var flag = 1
        var upMark = 0;
        layui.use(['form','upload','jquery','layedit', 'laydate'], function () {
            var form = layui.form;
            var upload = layui.upload;
            var $ = layui.jquery;
            var layer = layui.layer;
            var layedit = layui.layedit
            var laydate = layui.laydate;

            form.on('submit(addRentHouse)',function (data) {
                var picture = $("#picture").val()
                if ( upMark == 0 && picture == '' ){
                    layer.msg("请上传图片！");
                    return ;
                }

                $.ajax({
                    url:'/rentHouse/addRentHouse',
                    data:data.field,
                    dataType:'json',
                    type:'post',
                    success:function (data) {
                        if (data.success){
                            layer.msg(data.message);
                            layer.alert(data.message,function(){
                                window.parent.location.reload();//刷新父页面
                                parent.layer.close(index);//关闭弹出层
                            });
                        }else{
                            layer.msg(data.message);
                        }
                    }
                });
                return false;
            })

            //重置
            $("#reset").click(function () {
                $("input").val("");
                $("textarea").val('')
                var options = $("select").find("option");
                options.attr("selected", false);
                options.first().attr("selected", true);
                resetImg()

            })

            upload.render({
                elem: '#uploadImgs'
                ,multiple: true
                ,auto:false
                ,choose: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#previewImg').append('<img src="'+ result +'"  style="position: relative ;left:12px; width: 95%;height: auto;margin-bottom: 10px" alt="'+ file.name +'" class="layui-upload-img">')
                    });
                    files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                }
                ,done: function(res){

                },

            });

            //自定义验证规则
            form.verify({
                otherReq: function (value, item) {
                    var $ = layui.$;
                    var verifyName = $(item).attr('name')
                    var verifyType = $(item).attr('type')
                    var formElem = $(item).parents(".layui-form")//获取当前所在的form元素，如果存在的话
                    console.log("formElem:")
                    console.log(formElem)
                    var verifyElem = formElem.find('input[name=' + verifyName + ']')//获取需要校验的元素
                    var isTrue = verifyElem.is(':checked')//是否命中校验
                    var focusElem = verifyElem.next().find('i.layui-icon');//焦点元素

                    if (!isTrue || !value) {
                        //定位焦点
                        focusElem.css(verifyType == 'radio' ? {"color": "#FF5722"} : {"border-color": "#FF5722"});
                        //对非输入框设置焦点
                        focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function () {
                            focusElem.css(verifyType == 'radio' ? {"color": ""} : {"border-color": ""});
                        }).focus();
                        return '必选，不能为空';
                    }
                }
            })


            $("#resetImg").click(function (){
                resetImg()
            })

            function resetImg(){
                $('#previewImg').html('');
                //picture的值设为null
                $('#picture').val('')
                files=null
                flag = 1
                $.ajax({
                    url:'/rentHouse/removeSeesionValue',
                    type:'get',
                    success:function (data) {
                        if (data.success){
                            layer.msg(data.message);
                        }else{
                            layer.msg(data.message);
                        }

                    }
                });
                upMark = 0
            }

            $("#upoadBtn").click(function () {
                var id = $('#id').val()
                var picture = $('#picture').val()
                if ( (typeof (files) !== "undefined" && files != null)  ) {
                    if (flag == 0) {
                        layer.msg("已上传，请勿重新点击！");
                        return;

                    } else if (flag == 1) {
                        flag = 0
                    }
                    var form = new FormData();
                    for (let i in files) {
                        form.append("imgs", files[i]);
                    }
                    $.ajax({
                        url: '/rentHouse/uploadImgs',
                        type: "post",
                        async: true,
                        contentType: false,
                        processData: false,
                        data: form,
                        success: function (data) {
                            if (data.success) {
                                layer.msg(data.message);
                            } else {
                                layer.msg(data.message);
                            }
                        }
                    })
                    upMark = 1
                }
                else {
                    layer.msg("图片不能为空，请选择！");
                }
            })

        });


    </script>
</body>
</html>